<!DOCTYPE html>
<html>
	<!-- 个人主页页面 -->

<head>
	<meta charset="utf-8">
	<title>个人中心</title>
	<link rel="stylesheet" href="css/nav.css" />
	<link rel="stylesheet" href="css/login.css" />
	<link rel="stylesheet" href="css/footer.css" />
	<link rel="stylesheet" href="css/personalhomepage.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	<script src="js/ip.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
	
	
	
	<nav class="nav">
	
	
	
		<div class="ndiv">
			<ul>
				<a href="index.html" class="logo">
					<img src="img/ZXlogo.png" alt="">
					卓越在线首页
				</a>
			</ul>
			<ul>
				<li><a href="FreeClasses.html" class="fcolor">免费课</a></li>
				<li><a href="PracticalClasses.html" class="fcolor">实战课</a></li>
				<li><a href="SystematicCourses.html" class="fcolor">体系课</a></li>
	
				<li class="shangyehezuo">商业合作
					<div class="syhz">
						<p><a href="enterpriseServices.html">企业服务</a></p>
						<p><a href="teacherSettled.html">讲师入住</a></p>
					</div>
				</li>
				<li><a href="teacherlogin.html">教师系统</a></li>
			</ul>
			<ul class="rig">
				<input type="text" placeholder="请输入关键字">
				<button class="search">🔎搜索</button>
				<a href="shoppingcart.html">
					<img src="img/购物车.png" alt="" class="gwc">
				</a>
	
				<span>登录</span>&nbsp;<span>注册</span>
				<span class="dlxx">
					<a href="" class="xxtz"><img src="img/XXTZ.png" alt="" /></a>
					<a href="personalhomepage.html" class="grzy">
						<img src="img/toux.png" alt="" />
					</a>
					<span id="tcdl">退出</span>
				</span>
			</ul>
		</div>
		</div>
	</nav>
	<!-- 用户信息区域 -->
	<div class="user-info">
		<div class="user-info-content">
			<div class="user-info-left">
				<img src="img/toux.png" class="avatar" alt="头像">
				<span class="username">11111</span>
				<div class="user-desc">好好学习，天天向上~~</div>
			</div>
			<div class="user-stats">
				<div class="stat-item">
					<div class="num">0.08h</div>
					<div class="label">学习时长</div>
				</div>
				<div class="stat-item">
					<div class="num">2</div>
					<div class="label">关注</div>
				</div>
				<div class="stat-item">
					<div class="num">0</div>
					<div class="label">粉丝</div>
				</div>
			</div>
			<a href="#" class="settings-btn">
				<i class="fas fa-cog"></i>
				个人设置
			</a>
		</div>
	</div>

	<div class="grzy-container">
		<!-- 左侧菜单 -->
		<div class="left-menu">
			<ul class="menu-list">
				<li class="active" data-tab="my-course">
					<i class="icon-course"></i>我的课程
				</li>
				<li data-tab="collections">
					<i class="icon-star"></i>收藏
				</li>
				
				<li data-tab="orders">
					<i class="icon-order"></i>订单中心
				</li>
			</ul>
		</div>

		<!-- 右侧内容区 -->
		<div class="content-area">
			<!-- 我的课程标签页 -->
			<div class="tab-content active" id="my-course">
				<div class="course-tabs">
					<span class="tab active">全部</span>
					<span class="tab">免费课</span>
					<span class="tab">实战课</span>
					
				</div>
				<div class="course-list">
					<!-- 课程内容将通过JS动态加载 -->
				</div>
			</div>

			<!-- 收藏标签页 -->
			<div class="tab-content" id="collections">
				<div class="course-tabs">
					<span class="tab active">全部</span>
					<span class="tab">免费课</span>
					<span class="tab">实战课</span>
					
				</div>
				<div class="course-list">
					<!-- 收藏内容将通过JS动态加载 -->
				</div>
			</div>

			

			<!-- 订单中心标签页 -->
			<div class="tab-content" id="orders">
				<div class="order-tabs">
					<span class="tab active">全部</span>
					<span class="tab">未支付</span>
					<span class="tab">已完成</span>
				</div>
				<div class="order-list">
					<!-- 订单内容将通过JS动态加载 -->
				</div>
			</div>
		</div>
	</div>
	<script src="js/login.js"></script>
	<script src="js/personalhomepage.js"></script>
	<script>
		$('#tcdl').click(function(){
			window.location.href = 'index.html';
		})
	</script>
</body>

</html>